<template>
   <div class="name">
     <div class="head"></div>
     <div class="middle">Anthony</div>
     <div class="resume">'s Resume</div>
   </div>
</template>

<script>
export default {
  name: 'name'
}
</script>

<style scoped lang="stylus">
.name
  background rgba(255,255,255,.5)
  width 300px
  height 75px
  position absolute
  top 30px
  left 30px
  z-index 10
  border-radius 10px
  .head
    background url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544614259066&di=46201191cefaa26c06eef2873fdc99d8&imgtype=0&src=http%3A%2F%2Fdmimg.5054399.com%2Fallimg%2F120202%2F7_120202145125_1.jpg")
    background-size contain
    width 75px
    height 75px
    margin-left 10px
    border-radius 50%
  .middle
    position relative
    top -58px
    left 100px
    line-height 40px
    width 85px
    text-align center
    height 40px
    background black
    color white
    border-radius 10px
  .resume
    position relative
    top -98px
    left 190px
    line-height 40px
    width 90px
    text-align center
    height 40px
    color black
    font-size large
    &:hover
      color lightgreen
</style>
